supce's blog

CSS Secret 读书笔记之条纹背景&复杂背景

发表于  |    |  

条纹背景

通常条纹背景是由一个图片来代替，或者使用SVG。能不能利用CSS直接创建条纹图案呢，答案是肯定的。
假设背景是垂直线性渐变。比如：background:linear-gradient(#fb3,#58a);
效果是这个样子的：

如果让渐变区域变的更窄，产生一个无限小的渐变区域，比如：background:linear-gradient(#fb3 50%,#58a 50%); 就可以得到想要的结果了。

横向条纹

利用上面的方法可以轻松利用CSS绘出横向条纹，同时还可以设置多种颜色的条纹，以及每个条纹的尺寸。
HTML代码：

<div class="test-a"></div>
<div class="test-b"></div>
<div class="test-c"></div>

CSS代码：

body{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
div{
    margin: 20px 20px;
    padding: 0;
    width: 10em;
    height: 6em;
}
.test-a{
    background: linear-gradient(#fb3 50%, #58a 50%);
    background-size: 100% 24px;
}
.test-b{
    background: linear-gradient(#fb3 30%, #58a 30%);
    background-size: 100% 24px;
}
.test-c{
    background: linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);
    background-size: 100% 36px;
}

效果如下：

垂直条纹

幸好linear-gradient足够的灵活，利用它可以轻松创建出垂直条纹。
代码：

<div class="test-d"></div>
.test-d{
    background: linear-gradient(to right,#fb3 50%,#58a 50%);
    /*background: linear-gradient(90deg,#fb3 50%,#58a 50%);*/
    background-size: 32px 100%;   /*颠倒下宽度和高度值*/
}

斜向条纹

在绘制斜向条纹之前，如果对linear-gradient的斜向线性渐变不太理解，可以参考下张鑫旭大神的这篇博文
在完成水平和垂直条纹后，好像斜向条纹也很就简单，稍微修改下渐变方向和background-size的值就可以了。

background:linear-gradient(45deg,#fb3 50%,#58a 50%);
background-size: 32px 32px;

但是得到的结果并不是想要的。

如果观察下斜向条纹，会发现斜向条纹是由四条条纹的“贴片”组成的。如下图：

这样的话解决思路就有了。

background:linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
background-size: 32px 32px;

效果如下：

但是会发现条纹的宽度并不是16像素，因为background-size指定的长度是最左下角的直角三角形的直角边长度。而条纹的宽度是直角三角形的高，对于45度的三角形，要想高为16px，直角边设置为16√2，即background-size设置为2*16√2的约值。
好了，45度的斜向条纹完成了，好像其他度数的条纹比葫芦画瓢轻松得来，设置度数为60度

background:linear-gradient(60deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
background-size: 32px 32px;

结果是这个样子：

看来得换个思路了。
这时候可以祭出repeating-linear-gradient()了，它的工作方式与linear-gradient类似，只有一点不同，色标是无限循环重复的，直至填满整个背景。比如：

background:repeating-linear-gradient(45deg, #fb3,#58a 30px);

就等于

background:repeating-linear-gradient(45deg,
                    #fb3,#58a 30px,
                    #fb3 30px,#58a 60px,
                    #fb3 60px,#58a 90px,
                    #fb3 90px,#58a 120px,...);

45°斜向条纹就可以轻松创建了

background:repeating-linear-gradient(45deg, #fb3,#fb3a 16px,#58a 0,#58a 32px);

同时background-size也不用设置，因为长度就是直接在渐变轴上进行度量的。
现在试试60°的斜向条纹

background:repeating-linear-gradient(60deg, #fb3,#fb3 16px,#58a 0,#58a 32px);

效果如下：

灵活的同色系条纹

存在这样一种场景，我们想要的条纹图案并不是由差异极大的几种颜色组成的，而是由同色系但亮度不同的条纹组成。比如：

background: repeating-linear-gradient(30deg,#79b,#79b 16px,#58a 0,#58a 32px)

是这种效果

但是，如果想要修改颜色，就需要对上面的代码进行4处修改。身为懒癌患者，这是不能忍受的。于是诞生了下面这种方式：
先把最深的颜色指定为背景色，同时把半透明的白色条纹叠加在背景色之上来得到浅色条纹。

background: #58a;
background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 16px,
transparent 16px, transparent 32px);

这样就舒服多了：

复杂的背景图案

这里所说的复杂背景图案是指下面的网格、波点和棋盘背景。其实这些都是gradient的一些扩展应用。

网格

有了上面的水平和垂直条纹，网格背景其实就是两者的结合。举个最简单的例子。

background: white;
background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 50%),
    linear-gradient(rgba(200,0,0,.5) 50%,transparent 50%);
background-size: 32px 32px;


常用的可能会需要下面这种细线条单色网格背景。

background: #58a;
background-image: linear-gradient(white 1px,transparent 1px),
                      linear-gradient(90deg,white 1px,transparent 0);
background-size: 32px 32px;

偶尔还可能会用到两幅不同线宽的网格图案。显得更为真实一些，比如：

background: #58a;
background-image: linear-gradient(white 2px,transparent 0),
                linear-gradient(90deg,white 2px,transparent 0),
                linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
                linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);
background-size: 48px 48px,48px 48px,16px 16px,16px 16px;
}

波点

相对于网格背景，我个人更偏向于波点背景，波点背景其实是利用的径向渐变。最简单的就是圆点的阵列。

background: #655;
background-image: radial-gradient(tan 30%,transparent 0);
background-size: 32px 32px;


但是，这样看起来不是很自然。这时候可以考虑把两个径向渐变图像错位相排。

background: #655;
background-image: radial-gradient(tan 30%,transparent 0),
                radial-gradient(tan 30%,transparent 0);
background-size: 32px 32px;
background-position: 0px 0px,16px 16px;

这样的话就比较自然了

但是这段代码的可维护性确实很差，幸好Sass大法好。

@mixin polka($size,$dot,$base,$accent){
    background: $base;
    background-image: radial-gradient($accent $dot,transparent 0),
                      radial-gradient($accent $dot,transparent 0);
    background-size: $size $size;
    background-position: 0 0, $size/2 $size/2
}
@include polka(32px,30%,#655,tan);

每次$dot都打成$dota

棋盘

棋盘的话，见得并不多，调试的时候可以看见透明色就是用灰色棋盘来表示的。
棋盘的实现稍微复杂些，首先，利用渐变绘制出如图案：

background: #eee;
background-image: linear-gradient(45deg,rgba(0,0,0,.25) 25%,
            transparent 0,transparent 75%,rgba(0,0,0,.25) 0);
background-size: 32px 32px;


这时候会发现，再绘制一份相同的背景，然后错下位就可以实现棋盘效果了。

background: #eee;
background-image: linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0),
                  linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0);
background-size: 32px 32px;
background-position: 0 0 ,16px 16px;

当然在懒人癌的作用下，利用Sass处理下：

@mixin checkerboard($size,$base,$accent){
    background: $base;
    background-image: linear-gradient(45deg,$accent 25%,transparent 0, transparent 75%,$accent 0),
    linear-gradient(45deg,$accent 25%,transparent 0, transparent 75%,$accent 0);
    background-size: 2*$size 2*$size;
    background-position: 0 0, $size $size;
}
@include checkerboard(16px,#eee,rgba(200,0,0,.5));